<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

</head>
<body>
<div id="map" style="width: 100%">
    <button id="bt_print">打印地图</button>
</div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});

    var wms = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8080/geoserver/xcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                "STYLES": '',
                "LAYERS": 'xcy:bound',
                "exceptions": 'application/vnd.ogc.se_inimage',
            }
        })
    });
    var tiledwms = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            crossOrigin: 'anonymous',
            url: 'http://localhost:8080/geoserver/xcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'xcy:bound'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
/*    new ol.layer.Tile({
        extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.TileWMS({
            url: 'https://ahocevar.com/geoserver/wms',
            params: {'LAYERS': 'topp:states', 'TILED': true},
            serverType: 'geoserver',
            // Countries have transparency, so do not fade tiles:
            transition: 0
        })*/
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w"),
            tiledwms
        ],
        view:view,
        target: 'map'
    });

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                crossOrigin: 'anonymous',
                urls:urls
            })
        });
        return layer;
    }


    //添加
    $("#bt_print").click(function (e) {
        map.once('postcompose', function (event) {
            var canvas = event.context.canvas;
            if (navigator.msSaveBlob) {
                navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
            } else {
                canvas.toBlob(function (blob) {
                    saveAs(blob, 'map.png');
                });
            }
        });
        map.renderSync();
    });
</script>
</body>
</html>